import rough from '../node_modules/roughjs/bundled/rough.esm.js'

const canvas = document.querySelector('canvas')
const rc = rough.canvas(canvas)
// 12 * 12

const vertices1 = [
  [-5, 5],
  [-1, 5],
  [-1, 3],
  [1, 3],
  [1, 5],
  [5, 5],
  [5, 3],
  [3, 3],
  [3, 1],
  [-3, 1],
  [-3, 3],
  [-5, 3]
].map(tranform)

const vertices2 = [
  [-5, -3],
  [-5, -1],
  [5, -1],
  [5, -3],
  [1, -3],
  [1, -5], // 你妈这里写成 [1.-5], 我说怎么出现了一个-4，还以为是flat方法错了
  [-1, -5],
  [-1, -3]
].map(tranform)

function tranform (item) {
  return item.map(val => (val + 6) / 12 * 512)
    .map((val, idx) => idx === 1 ? 512-val : val)
}

const option = {
  fill: 'skyblue',
  seed: 23,
  roughness: 5,
  bowing: 0
}

rc.polygon(vertices1, option)
rc.polygon(vertices2, option)

console.log(vertices1, vertices2)

const url = canvas.toDataURL('image/png')

console.log(url)